Day12:操作HTML （三）

第 12 屆 iThome 鐵人賽

DAY 12

Modern Web

小白的JavaScript讀書日記系列第 12 篇

12th鐵人賽

q20038848

2020-09-13 02:30:18

2901 瀏覽

分享至

Day11的小練習答案：
Try1:修正下列程式碼，不用onload事件，還有什麼方式可以讓程式正確執行呢？

  <script>
    function atention() {
      document.getElementById('btn').onclick = function () {
        window.alert("您確定要送出？")
      }
    }
    atention();
  </script>
  <input id="btn" type="button" value="送出購物車" />

方法1:可以直接將<input id="btn" type="button" value="送出購物車" />往上移動到<script>的上方，程式就不會報錯了。

方法2:
將程式碼改寫成以下

<body>
 <script>
   document.addEventListener('DOMContentLoaded', function () {
     document.getElementById('btn').onclick = function () {
       window.alert("您確定要送出？")
     }
   });
 </script>
 <input id="btn" type="button" value="送出購物車" />
</body>

以上～
今天要聊的是存取表單元素我們開始吧！

存取表單元素

存取表單在實作中很常用到，下面會介紹一些常見的用法。

InputBox/SelectBox
要取得InputBox/SelectBox的值可以用value屬性，請看下列例子

<body>
<form>
    <label for="name">名稱</label>
<input id="name" name="name" type="text" size="30">
<input id="btn" type="button" value="送出">
</form>
<div id="result">結果:</div>
    <script>
        document.addEventListener('DOMContentLoaded',function(){
           
           //建立點擊事件          document.getElementById('btn').addEventListener('click',function(){
            
                //取出id=name的inputBox，並賦予給變數name
                let name = document.getElementById('name');
                
                //取出id=result的div，並賦予給變數result
                let result = document.getElementById('result');
                
                //將變數name用value取值並賦予給變數result用textContet呈現在畫面
                result.textContent = name.value;
            })
        });
    </script>
</body>

上述例子可以試看看，再InputBox中輸入的文字會取代掉下面的"結果:"。

CheckBox/RadioBox
請看以下範例:

<body>
    <h1>最喜歡的速食店</h1>
<form>
    <label><input type="checkbox" name="food" value="麥當勞">麥當勞</label>
    <label><input type="checkbox" name="food" value="肯德基">肯德基</label>
    <label><input type="checkbox" name="food" value="丹丹漢堡">丹丹漢堡</label>
    <input type="button" value="送出" id="btn">
</form>
    <script>
        document.addEventListener('DOMContentLoaded',function(){
            //建立點擊事件
            document.getElementById('btn').addEventListener('click',function(){
                let result = [];
                let foods = document.getElementsByName('food');

                //逐一判斷是否有被點選的
                for(let i= 0, len = foods.length; i<len ; i++){
                    let food =foods.item(i);
                    //有的話就加入陣列result[]
                    if(food.checked){
                        result.push(food.value);
                    }
                }
                //將陣列內容輸出到彈跳視窗
                alert(result.toString());
            })
        });
    </script>
</body>

再上述例子用到了getElementByName方法，這種方法可以讓id屬性不同但name屬性一樣的元素群組(可以觀察到程式碼中input的name屬性都一樣)。
再RadioBox的做法基本上一樣，這邊就當作小練習囉。
Try1:請將上述例子中input的type屬性改為radio，並改寫程式碼。

設定CheckBox：
可以預設CheckBox中的選項，我們直接看程式碼:

<body>
    <h1>最喜歡的速食店</h1>
<form>
    <label><input type="checkbox" name="food" value="麥當勞">麥當勞</label>
    <label><input type="checkbox" name="food" value="肯德基">肯德基</label>
    <label><input type="checkbox" name="food" value="丹丹漢堡">丹丹漢堡</label>
    <input type="button" value="送出" id="btn">
</form>
    <script>
        document.addEventListener('DOMContentLoaded',function(){
            let setCheckValue = function(name, value){
                let elems = document.getElementsByName('food')

                //檢查CheckBox找出相同的元素
                for(let i=0,len=elems.length;i<len;i++){
                    let elem = elems.item(i);
                    
                    //將帶入的value參數設定為被選擇的狀態
                    if(value.indexOf(elem.value)>-1){
                        elem.checked= true;
                    }
                }
            }

            //帶入的參數
            setCheckValue('food',['麥當勞','丹丹漢堡']);
        });
    </script>
</body>

上述我們將帶入的參數設定為麥當勞和丹丹漢堡，這兩家就會被預設打勾，可以自己替換是看看。
同時我們也用到了Array.indeOf方法，來檢查陣列value中是否有與屬性value值相等的元素，indexOf方法判定陣列中如果不存在的元素就會回傳-1，因此我們判斷是否>-1，就可以知道元素是否存在。再這邊也請將上述例子改為radio的版本。
Try2:請將上述例子中input的type屬性改為radio，並改寫程式碼。

取得上傳檔案資訊
這邊利用FileReader物件可以載入取得的檔案內容，下列程式碼是針對內容為字串的檔案，讀取後並顯示於網頁:

<body>

<form>
    <label for="file">檔案:</label>
    <input id="file" name="file" type="file" multiple>
</form>
</hr>
<pre id="result"></pre>
    <script>
        window.addEventListener('DOMContentLoaded',function(){
            document.getElementById('file').addEventListener('change',function(e){

                //取得所選的檔案，由於是單選所以索引值固定為0
                let input = document.getElementById('file').files[0];

                //使用FileReader物件時，首先要先定義load事件監聽
                let reader = new FileReader();
                reader.addEventListener('load',function(){
                    document.getElementById('result').
                    textContent =reader.result;
                });
                reader.readAsText(input)
            })
        })
    </script>
</body>

上述例子中用到了FileReader物件，再我們定義load事件監聽後，load事件監聽透過FileReader.result屬性存取載入的字串，在範例中直接將result傳值傳給<pre id="result">，接著我們呼叫readAsText()方法，將檔案載入。
p.s這邊可以自己先新增一個文字檔，然後上傳看看呦~
以下是readAsText()方法的語法:

reader.readAsText(file,[charset])
reader:FileReader物件
file:載入檔案(File物件)
charset:文字編碼(預設 UTF-8)

範例中，我們就省略了charset。

取得二進制檔案
什麼是二進制檔案?
wiki的解釋:https://zh.wikipedia.org/wiki/%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%96%87%E4%BB%B6
簡單來說就是文字檔以外的檔案。
來看程式碼吧:

<body>
<form>
    <label for="file">檔案:</label>
    <input id="file" name="file" type="file" multiple>
</form>
</hr>
<img id="result"></pre>
    <script>
        window.addEventListener('DOMContentLoaded',function(){
            document.getElementById('file').addEventListener('change',function(e){
                let input = document.getElementById('file').files[0];

                let reader = new FileReader();
                reader.addEventListener('load',function(){
                    document.getElementById('result').
                    src =reader.result;
                });
                
                //替換掉readAsText
                reader.readAsDataURL(input)
            })
        })
    </script>
</body>

上述例子，基本上和載入文字很像，但載入二進制檔案時不使用readAsText，而改用readAsDataURL方法，所以可以將圖片/聲音等資料已嵌入的方式，用直接用URL表示，
DataURL格式的資料可以嵌入到<img>的scr屬性，或者是<a>的href屬性。
再範例中就是設定給<img id="result">已顯示檔案內容。